<!-- 文心生成 -->

<!DOCTYPE html>
<html>
  <body>
    <video id="video" width="640" height="480" autoplay></video>
    <button id="take-photo">Take Photo</button>
    <canvas id="canvas" width="640" height="480"></canvas>

    <script>
      // 获取视频流并显示在视频元素中
      navigator.mediaDevices
        .getUserMedia({ video: true })
        .then(function (stream) {
          var video = document.getElementById("video");
          video.srcObject = stream;
          video.play();
        })
        .catch(function (err) {
          console.log("Error: " + err);
        });

      // 拍照并保存图片
      var takePhoto = document.getElementById("take-photo");
      takePhoto.addEventListener("click", function () {
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        context.drawImage(document.getElementById("video"), 0, 0, 640, 480);
        var image = canvas.toDataURL("image/png");
        var a = document.createElement("a");
        a.href = image;
        a.download = "photo.png";
        a.click();
      });
    </script>
  </body>
</html>